<template>
    <div class="page-content pull-to-refresh-content my-virtual-list" data-ptr-distance="55">
        <div class="pull-to-refresh-layer">
            <div class="preloader"></div>
            <div class="pull-to-refresh-arrow"></div>
        </div>
        <div v-if="forumList.total" class="media-list list-block">
            <ul>
                <li v-for="item in forumList.list">
                    <list-item :item="item">
                        <img class="list-img lazy lazy-fadeIn" :data-src="item.icon" slot="list-icon" />
                    </list-item>
                </li>

            </ul>
        </div>
    </div>
</template>

<script type="javascript">
    import store from '../store/index'
    import listItem from '../components/list-item.vue'
    export default{
        components: {
            'list-item':listItem,
        },
        mounted () {

            //初始化列表
            store.dispatch('initForumList', function(){

                _.delay(function(){
                    //lazy load
                    myApp.initImagesLazyLoad('#column-list-page')

                    //指定container
                    var ptrContent = $$('#column-list-page .pull-to-refresh-content');

                    //初始化pull to refresh
                    myApp.initPullToRefresh(ptrContent);

                    //监听pull to refresh事件
                    ptrContent.on('refresh', function (e) {
                        //更新列表
                        store.dispatch('initForumList')
                    });
                },0)

            })


        },
        methods: {
            pullToRefresh(){
                //指定container
                var ptrContent = $$('.pull-to-refresh-content');
                myApp.pullToRefreshTrigger(ptrContent);

                setTimeout(function(){
                    myApp.pullToRefreshDone();
                }, 1000)
            },
            addSnackbar(){
                //snackbar 通知
                myApp.addSnackbar({
                    message: '网络异常, 请检查你的网络设置, 系统将自动在5秒后重新尝试 ',
                    hold: 5000,
                    button : {
                        text: '重试',
                    },
                    closeOnClick : false,
                    onClose: function () {
                        myApp.alert('重新发出请求! ');
                    }
                });

            },

        },
        computed: {
            forumList() {
                return store.getters.forumList
            },

        }

    }
</script>
